<template>
  <div id="stock-top50">
    <div class="stock-top50-title">滞消库存TOP50</div>
    <dv-scroll-board :config="config" style="width: 100%;height: 80%;" />
  </div>
</template>

<script>
export default {
  name: 'StockTop50',
  data() {
    return {
      config: {}
    }
  },
  methods: {
    async createData() {
      let stockDate = []
      await this.$ajax.get('/wm/stock/get_stock_date').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取库存库龄TOP50数据发生错误：${resp.msg}`)
          return
        }
        if (resp.data.length > 0) {
          resp.data.forEach((item, index) => {
            let stock = []
            stock.push(item.warehouseName)
            stock.push(item.matrName)
            stock.push(item.stockDate)
            stock.push(item.skuQty)
            stockDate.push(stock)
          })
        }
      })
      this.config = {
        header: ['库存地', '耗材', '在库天数', '库存'],
        data: stockDate,
        index: true,
        columnWidth: [50, 200, 300, 100, 100],
        align: 'center',
        rowNum: 5,
        headerBGC: '#1981f6',
        headerHeight: 40,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)',
      }
    }
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 1800000)
  }
}
</script>

<style lang="scss">
#stock-top50 {
  position: relative;
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;

  .stock-top50-title {
    height: 20%;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }
}
</style>
